<!--
 * @Description:大屏模版2
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 19:47:29
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="home-div">
    <div class="left-view">
      <div class="left-box">
        <!-- 标题组件 -->
        <Title titleName="标题1">
          <template slot="left">
            <svg-icon icon-class="title"></svg-icon>
          </template>
          <template slot="right">
            <img src="@/assets/images/bigscreen/jt.png" alt="" />
          </template>
        </Title>
        <!-- 内容展示区域 -->
        <div class="content"></div>
      </div>
      <div class="left-box">
        <!-- 标题组件 -->
        <Title titleName="标题2">
          <template slot="left">
            <svg-icon icon-class="title"></svg-icon>
          </template>
          <template slot="right">
            <img src="@/assets/images/bigscreen/jt.png" alt="" />
          </template>
        </Title>
        <!-- 内容展示区域 -->
        <div class="content"></div>
      </div>
      <div class="left-box">
        <!-- 标题组件 -->
        <Title titleName="标题3">
          <template slot="left">
            <svg-icon icon-class="title"></svg-icon>
          </template>
          <template slot="right">
            <img src="@/assets/images/bigscreen/jt.png" alt="" />
          </template>
        </Title>
        <!-- 内容展示区域 -->
        <div class="content"></div>
      </div>
    </div>
    <div class="center-view">
      <!-- barBox 展示数据动态组件 -->
      <BarBox num1="3912410" num2="12581189"></BarBox>
      <!-- 中间内容区域 -->
      <Earth></Earth>
    </div>
    <div class="right-view">
      <div class="right-box">
        <!-- 标题组件 -->
        <Title titleName="标题4">
          <template slot="left">
            <svg-icon icon-class="title"></svg-icon>
          </template>
          <template slot="right">
            <img src="@/assets/images/bigscreen/jt.png" alt="" />
          </template>
        </Title>
        <!-- 内容展示区域 -->
        <div class="content"></div>
      </div>
      <div class="right-box">
        <!-- 标题组件 -->
        <Title titleName="标题5">
          <template slot="left">
            <svg-icon icon-class="title"></svg-icon>
          </template>
          <template slot="right">
            <img src="@/assets/images/bigscreen/jt.png" alt="" />
          </template>
        </Title>
        <!-- 内容展示区域 -->
        <div class="content"></div>
      </div>
      <div class="right-box">
        <!-- 标题组件 -->
        <Title titleName="标题6">
          <template slot="left">
            <svg-icon icon-class="title"></svg-icon>
          </template>
          <template slot="right">
            <img src="@/assets/images/bigscreen/jt.png" alt="" />
          </template>
        </Title>
        <!-- 内容展示区域 -->
        <div class="content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/title/title2.vue'
import Earth from '@/components/earth/index.vue'
import BarBox from '@/components/barBox/index.vue'
export default {
  components: {
    Title,
    Earth,
    BarBox
  }
}
</script>

<style lang="scss" scoped>
.home-div {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: url('~@/assets/images/bigscreen/bg2.jpg') no-repeat;
  background-size: 100% 100%;
  .left-view {
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(5, 22, 57, 0.2) 0%,
      rgba(18, 63, 104, 0.4) 100%
    );

    .left-box {
      width: 100%;
      height: 33%;
      margin-bottom: 10px;
      .content {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }
  .center-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    padding: 0 80px;
    .center-bottom {
      position: absolute;
      bottom: 0;
      left: 25.5%;
      width: calc(100% - 50% - 20px);
      height: 120px;
      padding: 0 20px;
      background: linear-gradient(
        180deg,
        rgba(5, 22, 57, 0.2) 0%,
        #123f68 100%
      );
    }
  }
  .right-view {
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(5, 22, 57, 0.2) 0%,
      rgba(18, 63, 104, 0.4) 100%
    );
    .right-box {
      width: 100%;
      height: 33%;
      margin-bottom: 10px;
      .content {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }
}
</style>
